@charset "utf-8";

/* Petites notes et petits conseils & Propriétées CSS intéressantes */

/* Outils de développement : - Couleurs - Pour chopper les couleurs qui vous plaisent sur un site,
                                il existe plusieurs extensions/modules complémentaires dans les différents navigateurs qui le permettent : 
							    colorZilla dans Chrome ou FireFox 
							 - Debug - Pour débuguer votre page que ce soit sur le css ou le javascript, le module complémentaire FireBug est pas mal 
							 */
							 
/* Sites intéressants : - Couleurs - Pour avoir des Thèmes de couleurs, pour créer des dégradés, il existe aussi plusieurs sites pas mal :
								   - Kuler de Adobe : https://kuler.adobe.com/explore/newest/
								   - Color Scheme Design : http://colorschemedesigner.com/ un peu plus complexe
								   - Un bon article sur les couleurs css et le resposive design : http://sixrevisions.com/css/colors-webdesign/ en anglais 
						- Icones - Si vous avez besoin d'icones libre de droit : 
									- http://www.softicons.com/ 
									- http://www.iconarchive.com/show/kingdom-hearts-icons-by-neokratos.html icones de Kingdom Heart pour Mr Palardy
								   Sachant qu'il existe une manipulation simple avec GIMP pour en créer sois même que je peux vous apprendre
								   
/* position: static,relative,absolute,fixed;

 .test {position: static;}
 valeur par défaut. left, top, right et bottom ne s'y appliquent pas.
 .test {position: relative;}
 positionnement se fera par rapport à l'endroit où l'élément à été déclaré dans le code HTML.
 .test {position: absolute;}
 permet de fixer un élément block au dessus d'autres éléments : exemple sur le Header où je supperpose des div transparantes sur les images du caroussel
 .test {position: fixed;}
 permet de fixer un élément block au dessus d'autres éléments et de faire que l'élément ne bouge pas pendant le défilement de la page
 
*/								   

/*=============================================================================*
|                                                                              |
|  CHARTRE GRAPHIQUE                                                           |
|                                                                              |
*==============================================================================*/

 /* 
 *	- Noir menu: 							#34363F + opacity à 0.79 -  rgba(1, 3, 15, 0.79);
 *	- Gris écriture sur fond foncé : 		#919191
 *  - Bleu foncé sur fond claire : 			#001385
 */

/*=============================================================================*
|                                                                              |
|  STRUCTURE                                                                   |
|                                                                              |
*==============================================================================*/

/* 	il est conseillé de mettre à zéro la marge et le remplissage de l'élément body, 
	pour tenir compte des différentes valeurs par défaut des navigateurs */
body  
{
	margin: 			0;
	padding: 			0;
	height: 			100%;	
    font-family: 		'gill_sanslight','AlegreyaSans-Regular',Verdana, Arial, Helvetica;
	font-size:			16px;
	color: 				black;
	border: 			none;
}

/*=============================================================================*
|                                                                              |
|  HEADER                                                                      |
|                                                                              |
*==============================================================================*/

/* HEADER GENERAL */
header 						{width:100%;height:350px;}
header h1 
{
    margin: 			0; 
    padding: 			10px 0; /* l'utilisation de remplissage, au lieu d'une marge, permet d'éloigner l'élément des bords de l'élément div */
} 
/* BARRE DE CONNEXION A POSITIONNEMENT FIXE*/
#header-menu-line-warper											{height:50px;width:100%;background-color:rgba(255,255,255,0.75);position:absolute;top: 10px;border: 1px solid #fff;}
#header-menu-line-warper #header-connexion							{float: right;margin-top:15px;}
#header-menu-line-warper #header-connexion a   						{font-size: 20px;text-transform: uppercase;}
#header-menu-line-warper #header-connexion #header-titre   			{color: #007C85;float: left;margin-right: 305px;margin-top: -10px;font-size:32px;text-transform: uppercase;}		
#header-menu-line-warper #header-connexion #header-inscription   	{color: rgba(1, 3, 15, 0.79);}						 
#header-menu-line-warper #header-connexion #header-seConnecter   	{color: #007C85;margin-right:150px;}
#header-menu-line-warper #header-logo-bird	   						{margin-left: 28px;margin-top:3px;}

/* CAROUSSEL */
#caroussel-conteneur												{width: 100%;height: 350px;z-index: 10;}
#caroussel-conteneur img 											{display:none;position:absolute;width:100%;height:350px;}
.header-withe														{opacity:0.3;background-color:white;width:100%;height:350px;}

/* MENU WARPER */
.header-menu 				{background-color:rgba(1, 3, 15, 0.79);border-top:2px solid rgb(117, 117, 117);border-bottom:1px solid rgb(0,0,0);width:100%;height:105px;}
.tooltip					{display: inline;position: relative;}

.tooltip:hover:after{
    background: #333;
    background: rgba(0,0,0,.8);
    border-radius: 5px;
    bottom: 120px;
    color: #D5D6D9;
	font-weight:bold;
    content: attr(title);
    left: 70%;
    padding: 5px 15px;
    position: absolute;
    z-index: 98;
    width: 100px;
}

.tooltip:hover:before{
    border: solid;
    border-color: #333 transparent;
    border-width: 6px 6px 0 6px;
    bottom: 112px;
    content: "";
    left: 80%;
    position: absolute;
    z-index: 99;
}

#icons-support input					{margin-left:9%;}

/* FORMULAIRE RECHERCHE MENU */
#header-searchform-wrapper-form							{width: 880px;height:44px;padding: 15px;background: rgba(255,255,255,0.6);position: absolute; margin-left: 21%;margin-top:13%;border: 1px solid #fff;}
#header-searchform-wrapper-form input 					{border: 2px solid #001385;height: 37px;width: 190px;margin-right: 15px;color: #999;color:#999; font-style: italic;}
#header-searchform-wrapper-form .button-recherche   	{border: 2px solid #001385;height: 37px;width: 195px;margin-right: 10px;color: #fff;background-color: #001385;text-transform: uppercase;}
#header-searchform-wrapper-form .nom-recherche
#header-searchform-wrapper-form .genre-recherche
#header-searchform-wrapper-form .support-recherche


/*=============================================================================*
|                                                                              |
|  CORPS PRINCIPAL                                                             |
|                                                                              |
*==============================================================================*/
	
.container-principal 
{ 
	width: 				100%;  /* ce paramétrage crée un conteneur dont la largeur est 80 % de celle du navigateur */
    margin: 			0 auto; /* les marges automatiques (et dotées d'une largeur positive) centrent la page */
    /*text-align: left; ce paramétrage annule le paramètre text-align: center de l'élément body. */
}

.container-principal  #sidebar-centre
{ 
	float: 					right; /* Cet élément doit précéder dans le code source tout élément à côté duquel il doit être positionné */
	width: 					70%;   /* cet élément est flottant, il faut donc lui attribuer une largeur */
	background-color: 	    #818388;   /* la couleur de l'arrière-plan est affichée sur la largeur du contenu de la colonne, mais pas au-delà */
	min-height: 			600px;
	font-family:			'AlegreyaSans-Regular';
}

.container-principal  #sidebar-float-right 
{ 
	float: 					right; /* Cet élément doit précéder dans le code source tout élément à côté duquel il doit être positionné */
	width: 					15%;   /* cet élément est flottant, il faut donc lui attribuer une largeur */
	background-color: 		#fff;   /* la couleur de l'arrière-plan est affichée sur la largeur du contenu de la colonne, mais pas au-delà */
	min-height: 			600px;
}

/* cette classe permet de rendre un élément flottant à gauche de la page. L'élément flottant doit précéder celui à côté duquel il doit apparaître dans la page. */
.container-principal #sidebar-float-left 
{ 
	float: 					left; /* Cet élément doit précéder dans le code source tout élément à côté duquel il doit être positionné */
	width: 					15%;  /* cet élément est flottant, il faut donc lui attribuer une largeur */
	background-color: 		#fff;
	min-height: 			600px;
}

#sidebar-float-right p, #sidebar-float-right  h3, #sidebar-float-left p, #sidebar-float-left h3 
{
	margin-left: 10px; /* il est conseillé d'attribuer des valeurs pour les marges gauche et droite de chaque élément qui sera placé dans les colonnes latérales */
	margin-right: 10px;
}

/*=============================================================================*
|                                                                              |
|  FOOTER                                                                      |
|                                                                              |
*==============================================================================*/

footer 
{ 
	position: 			absolute;
	width: 				100%;
	height:				150px;
	border-top:			2px solid rgb(1, 3, 15);
    background-color: 	rgba(1, 3, 15, 0.79);
} 

footer p 
{
	margin: 			0; 
	/* la mise à zéro de la marge du premier élément du pied de page permet d'éviter une possible disparition de la marge 
	(espace entre les éléments div) */
	padding: 			0; 
	/* l'utilisation d'un remplissage pour cet élément crée un espace, tout comme une marge l'aurait fait, 
	mais en évitant le risque de disparition de la marge */
	color:				#919191;
}

footer #footer-content				 				{position: relative; margin: auto;font-family: 'gill_sanslight';width: 74%;}
footer #footer-content .footer-column  				{width:200px; float:left; margin:10px 30px;}
footer #footer-content .footer-column p   			{border-bottom:1px solid #5F626B; color:#919191; font-size:18px; text-transform:uppercase;}
footer #footer-content .footer-column ul li 		{padding-left:0px;color:#919191; font-size:14px;} 
footer #footer-content .footer-column ul li img 	{vertical-align:top;height:90px;}

/*=============================================================================*
|                                                                              |
|  Bétises et tests                                                            |
|                                                                              |
*==============================================================================*/
.doge 
{
	background-image: url('../images/doge.png');
	height: 600px;
}

.grumpy
{
	background-image: url('../images/grumpy.png');
	height: 600px;
}

#bisou:hover
{
	background: url('../images/cageHorror.png')no-repeat;
	height: 350px;
}

/*=============================================================================*
|                                                                              |
|  PANIER                                                                      |
|                                                                              |
*==============================================================================*/

/*=============================================================================*
|                                                                              |
|  COMMON - Diverses classes à réutiliser                                                                   |
|                                                                              |
*==============================================================================*/

/* Positionnements & Visibilites */

/* cette classe doit être placée pour un élément div ou break et doit être l'élément final avant la balise de fin d'un conteneur 
qui doit contenir entièrement des  éléments flottants */ 
.clear						{float:none !important;clear:both !important;}

.float-left 
{ 
	float: 					left; /* Cet élément doit précéder dans le code source tout élément à côté duquel il doit être positionné */
	margin-right: 			5px;
}

.float-right 
{ 
	float: 					right; /* Cet élément doit précéder dans le code source tout élément à côté duquel il doit être positionné */
	margin-left: 			5px;
}

.hide 								{display: none;}
.visible       						{visibility:visible}
.block								{display: block;}
.iblock         					{display: inline-block;}
.inline         					{display: inline;}
.rel            					{position: relative;}
.abs         	 					{position: absolute;}

/* Fonts & Textes */
p           					{margin:5px 0;}
.a-l        					{text-align:left !important;}
.a-c        					{text-align:center !important;}
.a-r        					{text-align:right !important;}
.va-m       					{vertical-align:middle}
.important  					{color:red;font-weight:bold;}
.bold       					{font-weight:bold;}

/*=============================================================================*
|                                                                              |
|  DECLARATION DES FONTS SPECIFIQUES                                           |
|                                                                              |
*==============================================================================*/
@font-face {
    font-family: 'gill_sanslight';
    src: url('../fonts/gsl.eot');
    src: url('../fonts/gsl.eot?#iefix') format('embedded-opentype'),
         url('../fonts/gsl.woff') format('woff'),
         url('../fonts/gsl.ttf') format('truetype'),
         url('../fonts/gsl.svg#gill_sanslight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {	
	font-family: 'AlegreyaSans-Regular';
	src: url('../../www/css/fonts/AlegreyaSans-Regular.ttf');
}

@font-face {	
	font-family: 'Halo';
	src: url('../../www/css/fonts/Halo.ttf');
}

@font-face {	
	font-family: 'Halo3';
	src: url('../../www/css/fonts/Halo3.ttf');
}

@font-face {	
	font-family: 'Halo_Outline';
	src: url('../../www/css/fonts/Halo_Outline.ttf');
}


/* Titres de pages */
.title-box              			{text-transform:uppercase;border-bottom:1px solid #000000;padding:15px 20px 10px;position:relative;font-family:'gill_sanslight';font-size:17px;color:#000000;margin-bottom:10px;}
.title-box h1           			{font-weight:normal;}
.title-box h2           			{font-size:14px;font-weight:normal}
.title-box h1 + h2      			{color:#000;}
.title-box a.button     			{position:absolute;right:20px;top:8px;width:215px;}
.title-box select       			{position:absolute;right:20px;top:34px;width:227px;height:22px;border:1px solid #ccc}

/* Liens */
a       						{text-decoration:none;color:#919191;border:none;outline:none;}
a img   						{vertical-align:middle;margin-right:5px;display:inline-block;border:none;outline:none;}
a:hover 						{color:#FCFDD9;}

/* Liste */
li							{list-style-type: none;} /* Pour supprimer les images des puces, défini plusieurs styles de puces */
ul							{padding:0px;} /* Pour supprimer l'espace à gauche du text */

/* Messages boxes */
.msg-error        {border:1px solid #CD0A0A; 
			   background:#ffd4d4 url(../images/icones/icon-error.png) 5px 5px no-repeat;color:#000000;padding:5px 10px 5px 25px;margin-bottom:15px;}
.msg-info          {border:1px solid #003885; 
               background:#d1e4fd url(../images/icones/icon-info.png) 5px 5px no-repeat; color:#000000;padding:5px 10px 5px 25px;margin-bottom:15px;}
.msg-success    {border:1px solid #32a500; 
			   background:#d0ffbc url(../images/icones/icon-success.png) 5px 5px no-repeat; color:#000000;padding:5px 10px 5px 25px;margin-bottom:15px;}
.msg-warning    {border:1px solid #ff6600; 
			   background:#F7DDC3 url(../images/icones/icon-warning.png) 5px 5px no-repeat; color:#000000;padding:5px 10px 5px 25px;margin-bottom:15px;}
			   
/*=============================================================================*
|                                                                              |
|  ELEMENTS DE FORMULAIRE                                                      |
|                                                                              |
*==============================================================================*/

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"]            		{border: 1px solid #ccc;margin-bottom: 2px;width: 250px;height:18px;padding: 2px 5px;font-family:Arial !important;}
select:hover,
textarea:hover,
input[type="text"]:hover,
input[type="email"]:hover,
input[type="tel"]:hover,
input[type="password"]:hover,
input[type="number"]:hover      		{border-color:#34363F;}
select:focus,
textarea:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
input[type="number"]:focus      		{border-color:#34363F;}
input[type="submit"], 
input[type="button"]            		{padding: 2px 10px;margin: 2px 0;color: white;cursor: pointer;}
input[type="checkbox"]          		{margin:4px 0 0 0;}
textarea                        		{border: 1px solid #ccc;margin-bottom: 2px;width: 250px;height: 150px;padding: 2px 5px;resize:none;font-family:Arial !important;}
select                          		{border: 1px solid #ccc;margin-bottom: 2px;width: 262px;height:22px;font-family:Arial !important;}
label                           		{float: left;padding: 4px 0 0 0;width: 165px;}
label > span                    		{font-weight:bold;color:#f00;}
input[type="checkbox"] + label  		{width:auto;}
.required                       		{font-weight:bold;}
input.disabled, select.disabled,
textarea.disabled               		{background:#eee;color:#999;}
input.disabled:hover, 
select.disabled:hover,
textarea.disabled:hover         		{border:1px solid #ccc;}
.formline                       		{clear:both;margin-bottom:5px;min-height:22px;position:relative;}
.formline input, 
.formline select, 
.formline textarea              		{float:left;font-size:12px;}
.formline .form-erreur          		{color:red;}
.formline .form-erreur img      		{vertical-align:text-bottom}
.formline .button               		{margin:0;padding:3px 10px 4px 10px;}
.formline .submit-button        		{margin-bottom:15px;padding:6px 11px;}
.formline label + .submit-button		{width:263px;}
.formline .form-error,
.formline .form-error-custom    		{color:#f00;float:left;background:url(../images/icones/icon-error.png)   5px 5px no-repeat; padding:5px 0 0 25px;margin-left:7px;}
.formline .form-info           	 		{color:#0095e2;float:left;background:url(../images/icones/icon-info.png)   5px 5px no-repeat; padding:5px 0 0 25px;margin-left:7px;}
.formline div.left              		{padding:5px 0 0 5px;}
.formline-multi input + input   		{margin-left:3px;}

input.error-field,
select.error-field,
textarea.error-field            				{border-color:#ff7676;}
input#recaptcha_response_field.error-field 		{border-color:#ff7676 !important}

/* Form Sections */
.formsection                            		{border:1px solid #ccc;margin-bottom:20px;padding:10px;/*box-shadow:0px 0px 10px #ccc*/}
.formsection.nb                         		{border:none;box-shadow:0 0 0 transparent;}
.formsection-title                      		{padding:0 0 7px 0;font-weight:bold;font-size:16px;color:#003885;border-bottom:1px solid #003885;text-transform:uppercase;margin-bottom:15px;}
.formsection-content table.datatable    		{width:960px;}
.formsection-actions                    		{margin-top:10px;padding-top:7px;border-top:1px solid #ccc;height:24px;}
.formsection-overview label + span      		{float:left;padding-top:4px;}
.formsection-overview label.required    		{color:#f60;}
.formsection-overview .formline         		{border-bottom:1px solid #ccc; padding-bottom:5px; margin-bottom:5px;}
.formsection.valid-section              		{background:url(../images/icones/icon-success.png) right top no-repeat;border-color:#32a500;}
.formsection.valid-section.no-icon      		{background:none;}

/*=============================================================================*
|                                                                              |
|  TABLEAUX                                                      			   |
|                                                                              |
*==============================================================================*/

.datatable                          			{border-collapse:collapse;min-width:940px;font-size:12px;text-align:left;clear:both;margin:10px 0;overflow:hidden;text-overflow:ellipsis;}
.datatable tr                       			{border:1px solid #bfbfbf;}
.datatable thead tr                 			{border:1px solid #313131;}
.datatable th                       			{background:#313131;border:1px solid #313131;font-size:13px;color:white;font-weight:normal;padding:6px;cursor:pointer;text-align:left;}
.datatable td                       			{padding:10px 6px;cursor:default;vertical-align:top;}
.datatable td .trash-button         			{background:url(images/sprite-icon-trash.png) no-repeat;cursor:pointer;width:14px;height:16px;display:block;margin:auto;}
.datatable td .trash-button:hover   			{background-position:0 -16px;}
.datatable tr.odd td                			{background-color:#e9e9e9}
.datatable tr:hover > td,
.datatable tr.odd:hover > td        			{background-color:#d1e4fd}
.minImage  										{width: 1000px;}
.fond											{background-color:#b7b8bc;height:120px;border-bottom: 10px solid rgba(1, 3, 15, 0.79);margin-bottom: 10px;margin-top: 5px;width: 950px;
												 border-left: 1px solid rgba(1, 3, 15, 0.79);border-right: 1px solid rgba(1, 3, 15, 0.79);border-top: 1px solid rgba(1, 3, 15, 0.79);}
.button-afficheDetails   						{border: 2px solid #008580;background-color: #008580;height: 37px;width: 195px;margin-right: 10px;color: #fff;text-transform: uppercase;float: right;}
.button-commander								{border: 2px solid #008580;background-color: #008580;height: 37px;width: 195px;color: #fff;text-transform: uppercase;float: right;}
.fiche-jeu										{width:95%;height: 90%; margin-top:50px; margin-left:2%; background-color:#b7b8bc; border: 1px solid black;}
.fiche-jeu h2									{color: #001385;font-family:'gill_sanslight';font-size: 30px;text-transform: uppercase;font-weight: bolder;}
.fiche-jeu img									{padding-left: 20px;}

												 
												 
												 
												 
												 
												 